<!DOCTYPE html>
<html lang="en">
<head>
    <title>添加车辆信息</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/layui-util/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/laypage.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
    <script src="/layui-util/layui.js" charset="utf-8"></script>
    <style type="text/css">
        input.error, select.error {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<script src="/js/webSocket.js"></script>
<section id="container">
<#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <section class="panel" id="app">
                        <header class="panel-heading">
                            添加车辆信息
                        </header>
                        <div class="panel-body">
                            <div class="form" id="app">
                                <form style="margin-left: 400px">
                                    <div class="input-append" >
                                        <input type="text" name="userCardId" placeholder="请输入身份证号码^_^" id="userCardId">
                                        <button type="button" id="findUser"  class="btn btn-success">查询身份证</button>
                                        <span id="tishi"><font color="#a52a2a"></font></span>
                                    </div>
                                </form>

                                <form class="cmxform form-horizontal" id="addCarForm" action="/cars/addCars"
                                      enctype="multipart/form-data" method="POST" hidden
                                      onsubmit="return oncheckMethod();">
                                    <div v-for="(item,index) in result">
                                        <input type="text" hidden :value="item.suId" name="user.suId"/>
                                        <div class="form-group ">
                                            <label for="user.sname" class="control-label col-lg-3"><span
                                                    style="color: brown;">*</span>姓名</label>
                                            <div class="col-lg-6">
                                                <input class=" form-control" type="text" :value="item.sname" disabled
                                                       id="sname">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="licenseNum" class="control-label col-lg-3"><span
                                                style="color: brown;">*</span>车牌号</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="licenseNum" name="licenseNum" type="text">
                                            <span id="message" style="color: #cc0000;"></span>
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="color" class="control-label col-lg-3"><span
                                                style="color: brown;">*</span>颜色</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="color" name="color" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="price" class="control-label col-lg-3"><span
                                                style="color: brown;">*</span>价格</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="price" name="price" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="buyDate" class="control-label col-lg-3"><span style="color: brown;">*</span>购买日期</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="buyDate" name="buyDate" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="engineNum" class="control-label col-lg-3"><span
                                                style="color: brown;">*</span>发动机号</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="engineNum" name="engineNum" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="brand" class="control-label col-lg-3"><span
                                                style="color: brown;">*</span>车辆品牌</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="brand" name="brand" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="brandType" class="control-label col-lg-3"><span
                                                style="color: brown;">*</span>品牌系列</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="brandType" name="brandType" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="brandType" class="control-label col-lg-3"><span
                                                style="color: brown;">*</span>PIN</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="brandType" name="pinNum" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="type" class="control-label col-lg-3"><span
                                                style="color: brown;">*</span>车辆类型</label>
                                        <div class="col-lg-6">
                                            <select class="form-control m-bot15" name="type">
                                                <option value="">——请选择——</option>
                                                <option>私家车</option>
                                                <option>商用车</option>
                                                <option>客车</option>
                                                <option>货车</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group ">
                                        <label for="brandType" class="control-label col-lg-3"><span
                                                style="color: brown;">*</span>座位数</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="brandType" name="sate" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="brandType" class="control-label col-lg-3"><span
                                                style="color: brown;">*</span>图片上传</label>
                                        <div class="col-lg-6">
                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img" id="demo1" name="file"
                                                      width="120px" height="100px" src="">
                                                <input type="button" class="layui-btn layui-btn-normal" id="test8"
                                                       value="上传图片" style="margin-left: 30px">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-offset-3 col-lg-6">
                                            <button class="btn btn-primary" type="submit">提交</button>
                                            <input class="btn btn-info" type="reset"/>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
            </div>
        </section>
      <#include "foot.ftl"><#--引入底部-->
    </section>
</section>
</body>
</html>
<script>
    $.validator.setDefaults({
        ignore: ":hidden:not(select)",//解决select 下拉列表不能校验的问题
        submitHandler: function () {
            save();
        }
    });
    jQuery.validator.addMethod("regex", function (value, element, params) {
        var exp = new RegExp(params);
        return exp.test(value);
    }, "格式错误");
    jQuery.validator.addMethod("isNumber", function (value, element) {
        return this.optional(element) || /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(value);
    }, "匹配数值类型，包括整数和浮点数");
    var app = new Vue({
        el: "#app",
        data: {
            result: []
        }
    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#buyDate',
            them: 'molv',
            format: 'yyyy-MM-dd'
        });
    });

    /**
     * 根据身份证号查找人
     * */
    $("#findUser").click(function () {
        $.ajax({
            type: "POST",
            url: "/cars/getUserByCardId",
            data: {
                userCardId: $("#userCardId").val()
            },
            success: function (data) {
                if (data == "" || data == null) {
                    $("#addCarForm").css("display", "none");
                    $("#tishi").html("<i style='color: red'>客户信息不存在，<a href='/user/add_User' style='color:blue'> 请点击添加</a></i>");
                }
                if (data != "" && data != null) {
                    $("#addCarForm").css("display", "block");
                    app.result = data;
                }
            }
        });
    });
    $("#userCardId").focus(function () {
        $("#tishi").html("");
    });

    /**
     * 根据车牌号，查找车的
     */

    $("#licenseNum").blur(function () {
        $.ajax({
            type: "POST",
            url: "/cars/getCarById",
            data: {
                licenseNum: $("#licenseNum").val()
            },
            success: function (data) {
                if (data) {
                    $("#message").html("已经存在，请勿重复添加，<a href='/cars/find'style='color:blue'> 点击查看</>");
                }
            }
        });
    });

    function oncheckMethod() {
        if ($("#message").text() != "") {
            layer.msg('该车已经存在,请前去查看', {icon: 6});
            return false;
        }
        if ($("#demo1").prop("src") == "" || $("#demo1").attr("src") == "") {
            $(".layui-upload-list").find("span").remove();
            $("#demo1").after("<span>请上传车辆图片</span>");
            return false;
        }

    }
    $("#test8").click(function () {
        $(".layui-upload-list").find("span").remove();
    });

    $("#addCarForm").validate({
        rules: {
            licenseNum: {
                required: true,
                regex: "^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$"
            },
            color: {
                required: true
            },
            price: {
                required: true,
                isNumber: true
            },
            buyDate: {
                required: true
            },
            brandType: {
                required: true
            },
            brand: {
                required: true
            },
            engineNum: {
                required: true
            },
            type: {
                required: true
            },
            sate: {
                required: true,
                range: [2, 10]
            },
            pinNum:{
                required:true
            }
        }, messages: {
            licenseNum: {
                required: "",
                regex: "车牌号的格式错误"
            },
            color: {
                required: ""
            },
            price: {
                required: "",
                isNumber: "必须为数值类型(正整数或正小数,且小数位不超过2位)"
            },
            buyDate: {
                required: ""
            },
            brandType: {
                required: ""
            },
            brand: {
                required: ""
            },
            engineNum: {
                required: ""
            },
            type: {
                required: "请选择一种车型"
            },
            sate: {
                required: "",
                range: "座位数不合理"
            },
            pinNum:{
                required:""
            }
        }
    });

    layui.use('upload', function () {
        var upload = layui.upload;
        upload.render({
            elem: '#test8',
            auto: false,
            size: 1024,
            exts: 'png|jpg|gif|ico',
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result);
                });
            },
            done: function () {
                return layer.msg("添加成功");
            }
            , error: function () {
                layer.msg("添加失败");
            }
        });
    });
</script>

